<div class="layuimini-container layuimini-page-anim">
  <div class="layuimini-main">
    <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>
  </div>
</div>

<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-normal data-add-btn layui-btn-sm" lay-event="add">添加类型</button>
  </div>
</script>

<script type="text/html" id="currentTableBar">
  <a class="layui-btn layui-btn-normal layui-btn-sm data-count-edit" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-sm layui-btn-danger data-count-delete" lay-event="delete">删除</a>
</script>

<script>
  var tableData = [
    {
      'id': 10000,
      name: '补考',
      type: '安管人员',
      date: '2021-10-08',
      state: '待审批'
    },
    {
      'id': 10000,
      name: '补考',
      type: '安管人员',
      date: '2021-10-08',
      state: '待审批'
    },
    {
      'id': 10000,
      name: '补考',
      type: '安管人员',
      date: '2021-10-08',
      state: '待审批'
    },
    {
      'id': 10000,
      name: '补考',
      type: '安管人员',
      date: '2021-10-08',
      state: '待审批'
    }, {
      'id': 10000,
      name: '补考',
      type: '安管人员',
      date: '2021-10-08',
      state: '待审批'
    }, {
      'id': 10000,
      name: '补考',
      type: '安管人员',
      date: '2021-10-08',
      state: '待审批'
    }
  ]
  layui.use(['jquery', 'table'], function () {
    var $ = layui.jquery,
      table = layui.table

    table.render({
      elem: '#currentTableId',
      data: tableData,
      toolbar: '#toolbarDemo',
      defaultToolbar: [],
      cols: [[
        { field: 'id', title: '序号', sort: true },
        { field: 'name', title: '计划类型' },
        { title: '操作', minWidth: 180, toolbar: '#currentTableBar', align: 'center' }
      ]],
      limits: [10, 15, 20, 25, 50, 100],
      limit: 5,
      page: true
    })

    /**
     * toolbar事件监听
     */
    table.on('toolbar(currentTableFilter)', function (obj) {
      if (obj.event === 'add') {   // 监听添加操作
        layer.prompt({
          formType: 2,
          value: '',
          title: '请输入',
          area: ['300px', '40px'] //自定义文本域宽高
        }, function (value, index, elem) {
          alert(value) //得到value
          layer.close(index)
        })
      }
    })

    // 编辑
    table.on('tool(currentTableFilter)', function (obj) {
      var data = obj.data
      if (obj.event === 'edit') {
        layer.prompt({
          formType: 2,
          value: '初始值',
          title: '请输入',
          area: ['300px', '40px'] //自定义文本域宽高
        }, function (value, index, elem) {
          alert(value) //得到value
          layer.close(index)
        })
        return false
      } else if (obj.event === 'delete') {
        layer.confirm('真的删除行么', function (index) {
          obj.del()
          layer.close(index)
        })
      }
    })

  })
</script>
